<style lang="scss" scoped>
.new-add {
  position: fixed;
  top: 0;
  right: 0.5rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.35rem;
  color: #fff;
  z-index: 99999;
}
.main-content {
  margin-top: 1rem;
  display: flex;
  flex:1;
  flex-direction: column;
  // border:1px solid red;
  margin-bottom:0rem;
  width:100%;
  //overflow-y: auto;
  background-color: #f7f7f7;
}
.mint-loadmore{
  width:100%;
}
</style>
<template>
  <div>
    <span class="new-add" @click="newAdd">新增</span>
    <headTop :theRouter="therouter"></headTop>
    <!-- v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="20" -->
    <div class="main-content" >
        <div class="infosend-module" :key="item.id" v-for="item in auditList">
          <div class="title fn-clear" @click="enterDetail(item.id)">
            <i class="icon1"></i>
            <span>{{item.hy_name}}</span>
            <span class="state state0" v-show="item.status==0">待审核</span>
            <span class="state state1" v-show="item.status==1">已审核</span>
            <span class="state state2" v-show="item.status==2">审核未通过</span>
            <span class="state state3" v-show="item.status==3">草稿</span>
            <i class="arrow"></i>
          </div>
          <div class="table-show">
            <table>
              <tbody>
                <tr>
                  <td class="column">申请原因</td>
                  <td class="ctc">{{item.application}}</td>
                </tr>
                <tr>
                  <td class="column">申请人</td>
                  <td class="ctc">{{item.applicant}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <infinite-loading @infinite="loadMore">
          <span slot="no-more">没有更多了</span>
        </infinite-loading>
    </div>
    
  </div>
</template>
<script>
import { BASEURL } from "./../../api/api"
import axios from "axios"
import headTop from "./../common/header"
import InfiniteLoading from 'vue-infinite-loading'
export default {
  name: "infoaudit",
  components: {
    headTop,
    InfiniteLoading
  },
  computed: {
    therouter: function() {
      return this.$route;
    }
  },
  create(){
    this.getData();
  },
  mounted() {
  },
  data() {
    return {
      auditList: [],
      loading:false,
      pageSize:10,
      pageNo:0
    };
  },
  methods: {
    loadMore($state){
      this.pageNo = this.pageNo+1;
      this.getData($state);
    },
    getData($state) {
      let _self = this;
      axios.get(BASEURL + "getApplyList?pageNo="+this.pageNo+'&pageSize='+this.pageSize, {})
      .then((res) => {
            this.loading = res.data.applyList.length < this.pageSize
            if(res.data.applyList.length < this.pageSize){
              $state.complete();
            }
          _self.auditList = this.auditList.concat(res.data.applyList);
          $state.loaded();
        }).catch((error) => { 
          console.log(error);
        });
    },
    newAdd() {
      this.$router.push({ path: "/infonewadd" });
    },
    enterDetail(id) {
      this.$router.push({ path: "/infodetail",query: {applyId: id} });
    }
  }
};
</script>
